<template>
  <div class="risk">
    <!-- <div class="risk-title">
            <span class="risk-title__name">待完善项目</span>
            <span class="risk-title__txt">（仅统计已开工项目）</span>
        </div>-->
    <div class="risk-radio">
      <el-radio-group v-model="type" @change="radioChange">
        <el-radio v-for="v in typeList" :label="v.type" :key="v.type">{{
          v.name
        }}</el-radio>
      </el-radio-group>
    </div>
    <div class="risk-progress">
      <div class="subbox">
        <div
          v-for="(item, index) in progressItems"
          :data-title="title + '\n' + item.areaName + '：' + item.count"
          :key="index"
          :class="
            progressItems.length <= 24 ? 'progress-item large' : 'progress-item'
          "
        >
          <div class="progress-item__province">{{ item.areaName }}</div>
          <div class="progress-item__progress">
            <div
              class="progress-item__progress__inner"
              :style="{ width: (item.count / max) * 100 + '%' }"
            ></div>
          </div>
          <div class="progress-item__num">{{ item.count }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import improvingData from './riskwarning/improvingProject.json'

export default {
  name: 'improvingProject',
  props: {
    areaId: {
      type: String,
      default: '',
    },
    isNmUsers: {
      type: Boolean,
      default: false,
    },
    isEsUsers: {
      type: Boolean,
      default: false,
    },
    isYSs: {
      type: Boolean,
      default: false,
    },
    isCcUsers: {
      type: Boolean,
      default: false,
    },
    isXsbnUsers: {
      type: Boolean,
      default: false,
    },
    isJjUsers: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    areaId(newValue, oldValue) {
      this.type = 'inputBankTotal'
      this.getImprovingData(this.areaId, this.type)
    },
  },
  computed: {
    title() {
      let index = this.typeList.findIndex((v) => v.type === this.type)
      return this.typeList[index].name
    },
  },
  data() {
    return {
      type: 'inputBankTotal',
      progressItems: [],
      max: 0,
      typeList: [],
    }
  },
  mounted() {
    if (!this.isEsUsers) {
      this.typeList = [
        {
          name: '未录入专户',
          type: 'inputBankTotal',
        },
        {
          name: '上月未制作工资表',
          type: 'lastNonthPayTotal',
        },
        {
          name: '未缴存专户资金',
          type: 'depositFundTotal',
        },
        {
          name: '未代发工资',
          type: 'payTotal',
        },
        {
          name: '近60天未代发工资',
          type: 'payDayTotal',
        },
        {
          name: '未上传维权公示牌',
          type: 'psTotal',
        },
        {
          name: '未缴存保证金',
          type: 'depositAccassTotal',
        },
        {
          name: '未落实实名制',
          type: 'realTotal',
        },
        {
          name: '未实名制考勤',
          type: 'realAttTotal',
        },
        {
          name: '未安装考勤设备',
          type: 'noEquipAttMachineTotal',
        },
      ]
    } else {
      this.typeList = [
        {
          name: '未录入专户',
          type: 'inputBankTotal',
        },
        {
          name: '上月未制作工资表',
          type: 'lastNonthPayTotal',
        },
        {
          name: '未落实实名制',
          type: 'realTotal',
        },
        {
          name: '未代发工资',
          type: 'payTotal',
        },
        {
          name: '近60天未代发工资',
          type: 'payDayTotal',
        },
        {
          name: '未实名制考勤',
          type: 'realAttTotal',
        },
        {
          name: '未缴存专户资金',
          type: 'depositFundTotal',
        },
        {
          name: '未上传维权公示牌',
          type: 'psTotal',
        },
        {
          name: '未缴存保证金',
          type: 'depositAccassTotal',
        },
        {
          name: '未安装考勤设备',
          type: 'noEquipAttMachineTotal',
        },
      ]
    }
    // await this.getImprovingData(this.areaId, this.typeList[0].type);
    // this.getMax();
    this.getImprovingData(this.areaId, this.type)
  },
  methods: {
    getMax() {
      this.max = 0
      this.progressItems.forEach((item) => {
        this.max = item.count * 1 > this.max * 1 ? item.count * 1 : this.max * 1
      })
    },
    radioChange(val) {
      // await this.getImprovingData(this.areaId, val);
      // this.getMax();
      this.getImprovingData(this.areaId, this.type)
    },
    // 获取待完善项目数据
    getImprovingData(areaId, type) {
      this.getRealImprovingData(areaId, type)
    },
    getRealImprovingData(areaId, type) {
      return this.axios({
        method: 'post',
        url: '/api-s/cs/statsprojectimprove/improvestats',
        data: {
          areaId,
          type,
        },
      })
        .then((response) => {
          const results = response.data.result
          this.progressItems = results
          this.getMax()
        })
        .catch((error) => {
          this.$message.error(error.response.data)
        })
    },
    getFakeImprovingData(areaId, type) {
      let fakeImprovingData = null
      if (this.isYSs) {
        fakeImprovingData = improvingData[0]
      } else if (this.isNmUsers) {
        fakeImprovingData = improvingData[1]
      } else if (this.isCcUsers) {
        fakeImprovingData = improvingData[2]
      } else if (this.isXsbnUsers) {
        fakeImprovingData = improvingData[3]
      } else if (this.isJjUsers) {
        fakeImprovingData = improvingData[4]
      } else if (this.isYichunUser()) {
        fakeImprovingData = improvingData[5]
      } else if (this.isYinChuanUser()) {
        fakeImprovingData = improvingData[6]
      }
      let data = []
      if (fakeImprovingData[areaId]) {
        data = fakeImprovingData[areaId]
      } else {
        let index = 0
        if (Object.keys(fakeImprovingData).length > 0) {
          Object.keys(fakeImprovingData).forEach((v, i) => {
            if ((v + '').length == (areaId + '').length) {
              index = i
            }
          })
        }
        data = fakeImprovingData[Object.keys(fakeImprovingData)[index]]
      }
      if (type != 'inputBankTotal' && type != 'lastNonthPayTotal') {
        type = 'realTotal'
      }
      let progressList = []
      let progressItem = {}
      data.forEach((v) => {
        progressItem.areaName = v.areaName
        progressItem.count = v[type]
        progressList.push(JSON.parse(JSON.stringify(progressItem)))
      })
      this.progressItems = JSON.parse(JSON.stringify(progressList))
      this.getMax()
    },
  },
}
</script>
<style lang="less" scoped>
.risk {
  height: 100%;
  background: #274a65;
  padding: 15px 10px;
  overflow: hidden;
  .risk-radio {
    background: #1c405b;
    padding: 12px;
    padding-top: 10px;
    padding-bottom: 0;
    margin: 20px 0 10px 0;
    /deep/ .el-radio {
      width: 33%;
      margin-bottom: 8px;
      margin-right: 0;
    }
    /deep/ .el-radio__inner {
      width: 12px;
      height: 12px;
      background: none;
      border-color: #7a8b9b;
    }
    /deep/ .el-radio__label {
      font-size: 12px;
      color: #7a8b9b;
      letter-spacing: 0;
      text-align: left;
      padding-left: 6px;
    }
    /deep/ .is-checked {
      .el-radio__inner {
        background: none;
        border-color: #53ffac;
      }
      .el-radio__label {
        font-size: 12px;
        color: #53ffac;
        letter-spacing: 0;
        text-align: left;
      }
    }
    /deep/ .el-radio__inner::after {
      background: #53ffac;
    }
  }
  .risk-progress {
    height: 100%;
    padding-bottom: 10px;
    .subbox {
      height: calc(100% - 100px);
      overflow: auto;
    }
    .progress-item {
      // display: flex;
      align-items: center;
      margin-bottom: 5px;
      position: relative;
      height: 16px;
      line-height: 16px;
      &::after {
        content: '';
        height: 0;
        clear: both;
        overflow: hidden;
        display: block;
        visibility: hidden;
      }
      &:hover {
        background: rgb(72, 97, 116);
        &::before {
          display: block;
          position: absolute;
          top: -100%;
          left: 20%;
          z-index: 10;
          padding: 8px 8px;
          font-size: 12px;
          line-height: 14px;
          text-align: center;
          content: attr(data-title);
          //在这里设内置好title出现的位容置就好了
          color: #ffffff;
          border-radius: 5px;
          background-color: rgba(47, 57, 65, 0.9);
        }
      }
      &:first-child {
        &:hover {
          &::before {
            top: 100%;
          }
        }
      }
      &__province {
        float: left;
        font-family: SourceHanSansCN-Regular;
        font-size: 12px;
        color: #ffffff;
        text-align: right;
        width: 48px;
        overflow: hidden;
        white-space: nowrap;
      }
      &__progress {
        // flex: 1;
        // float: left;
        width: calc(100% - 104px);
        height: 6px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 48px;
        margin: auto 8px;
        &__inner {
          background: #6defff;
          height: 6px;
        }
      }
      &__num {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        font-size: 12px;
        color: #6defff;
        text-align: right;
        width: 40px;
        padding-right: 5px;
      }
    }
    .large {
      height: 24px;
      line-height: 24px;
      .progress-item__province {
        font-size: 14px;
        width: 56px;
      }
      .progress-item__progress {
        width: calc(100% - 114px);
        height: 10px;
        left: 56px;
        &__inner {
          background: #6defff;
          height: 10px;
        }
      }
      .progress-item__num {
        font-size: 14px;
      }
    }
  }
}
@media screen and (max-width: 1280px) {
  /deep/ .el-radio {
    width: 50% !important;
  }
  .subbox {
    height: calc(100% - 160px) !important;
  }
}
</style>
